import React, { Component } from 'react'
import { Card } from 'antd'
import './index.css'
import { VideoCameraOutlined } from '@ant-design/icons';
import imgSrc from '../../assets/monitor_bg.png'
import History from './components/history'

interface CameraItem{
    id:number;
    name:string;
    status:boolean;
}

interface StateType {
    cameraList:Array<CameraItem>;
    isShow:boolean
}

interface Monitor{
    state:StateType
}

class Monitor extends Component {
    constructor(props:any){
        super(props)
        this.state = {
            cameraList:[],
            isShow:false
        }
    }
    componentDidMount(): void {
        let cameraList = []
        for(let i=0;i<14;i++){
            cameraList.push({
                id:i,
                name:'测试2'+i,
                status:i%2?false:true
            })
        }
        this.setState({
            cameraList
        })
    }
    render() {
       
        return (
            <div>
                <Card title="通信监控" bordered={false} extra={<a onClick={()=>this.setState({isShow:true})}>日志查看</a>}>
                    <div className='monitor_main'>
                        {
                            this.state.cameraList.map(item=>{
                                return (
                                    <div className={`camera camera_${item.id}`} key={item.id} style={{ backgroundColor: item.status?'#00b22e':'#666' }}>
                                        <VideoCameraOutlined style={{ fontSize: '32px', color: '#fff' }}/>
                                    </div>
                                )
                            })
                        }
                        <img className='monitor_bg' src={imgSrc} alt="背景" />
                    </div>
                </Card>
                {
                    this.state.isShow && <History close={()=>this.setState({isShow:false})} />
                }
            </div>
        )
    }
}
export default Monitor
